<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<input name="account" value="账号"/>
		<input name="password" value="密码"/>
		<input name="phone" value="手机号"/>
		<button type="button" onclick="on()">新增</button>
		<table border="1">
			<thead>
				<th>姓名</th>
				<th>序号</th>
				<th>电话</th>
				<th>操作</th>
			</thead>
			<tbody id="table_contant">
				<!-- <tr>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td><button type="button">删除</button></td>
				</tr>
				<tr>
					<td>2</td>
					<td>2</td>
					<td>2</td>
					<td><button type="button">删除</button></td>
				</tr>
				<tr>
					<td>3</td>
					<td>3</td>
					<td>3</td>
					<td><button type="button">删除</button></td>
				</tr> -->
			</tbody>
		</table>
		<script type="text/javascript">
			window.onload = bulid_data(user_data);
			var $ = function(name){
				return document.querySelector(name);
			}
			var user_data = [
				{
					account:"admin",
					password:"123",
					phone:"123456789"
				},
				{
					account:"admin2",
					password:"123",
					phone:"123456789"
				},
				{
					account:"admin3",
					password:"123",
					phone:"123456789"
				},
			];
			
			// function on(){
			// 	var tc = $("#table_contant");
				
			// 	var html = 
			// 	tc.innerHTML+
			// 	"<tr>"+
			// 	" <td>4</td>"+
			// 	" <td>4</td>"+
			// 	" <td>4</td>"+
			// 	" <td><button>删除</button></td>"+
			// 	"</tr>";
				
			// 	tc.innerHTML = html;
			// }
		
			function bulid_data(data){
				var html = "";
				for(var i=0; i < data.length;i++){
					var user =data[i];
					 html +=
					 "<tr>"+
					 "<td>"+ user.account +"</td>"+
					 "<td>"+ user.password +"</td>"+
					 "<td>"+ user.phone +"</td>"+
					 "<td><button onclick=\"del()\">删除</button></td>"+
					 "</tr>";
				
				}
				var tc = $("#table_contant");
				tc.innerHTML = html;
			}
		
		</script>
	</body>
</html>
